<template>
    <div class="trading-platform">
        <div class="trading-platform-card">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <template v-for="(item,i) in tabList">
                    <el-tab-pane :key="i" :name="item.name" v-if="item.isShow">
                        <div slot="label" v-czc="['首页', '点击按钮' , item.label ,0 ,`home-btn-${item.nodeid}`]">{{item.label}}</div>
                        <component :is="item.component"></component>
                    </el-tab-pane>
                </template>
            </el-tabs>

            <el-button class="btn-edit" type="text" icon="el-icon-edit" @click="editOrAdd">纠错及添加</el-button>
        </div>

        <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="40%"
        destroy-on-close
        :close-on-click-modal="false"
        append-to-body
        >   
            <template slot="title">
                <h3>纠错及添加</h3>
            </template>

            <div class="trading-content">
                <trading-form 
                    :types="['gjxz','qtfw']"
                    @cancel="dialogVisible = false"
                ></trading-form>
            </div>
            
        </el-dialog>
    </div>
</template>

<script>
import tradingForm from './components/form.vue'
import tradingDetail from './components/detail.vue'
import TradingAndWork from './components/trading-and-work.vue';
import Platform from './components/platform.vue';
import DownloadTool from './components/download-tool.vue';
import Other from './components/other.vue';

import { mapGetters, mapActions } from 'vuex';

export default {
    head: {
    },
    props:{

    },
    components: { 
        tradingForm,
        tradingDetail,
        TradingAndWork,
        Platform,
        DownloadTool,
        Other,
    },
    data: () => ({
        dialogVisible:false,
        componentStatus:'edit',//组件状态 'edit'编辑组件,'detail'详情组件
        activeName:'3',
        tabList:[
            {
                label: '交易中心及办事指南',
                name: '1',
                component: TradingAndWork,
                isShow: false,
                nodeid:'tradingAndWork',
            },
            {
                label: '交易平台',
                name: '2',
                component: TradingAndWork,
                isShow: false,
                nodeid:'Platform',
            },
            {
                label: '工具下载',
                name: '3',
                component: DownloadTool,
                isShow: true,
                nodeid:'downloadTool',
            },
            
            {
                label: '常用网站',
                name: '5',
                component: Other,
                isShow: true,
                nodeid:'other',
            },
        ],
    }),
    computed: {
        ...mapGetters({
            getNickname: 'userinfo/getNickname'
        }),
    },
    methods: {
        /**
         * 纠错及添加
         */
        editOrAdd(){
            if (this.getNickname) {
                this.componentStatus = 'edit';
                this.dialogVisible = true;
            } else {
                this.showLogin();
            }
        },
        detail(){
            this.componentStatus = 'detail';
            this.dialogVisible = true;
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),

    },
    mounted() {

    },
    beforeDestroy() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .trading-platform {

        ::v-deep .el-tabs__item {
            color: #343434;
            font-weight: 800;
        }
        ::v-deep .el-tabs__item.is-active {
            color: $primaryColor;
            font-weight: 800;
        }

        .trading-platform-card {
            position: relative;

            ::v-deep .el-card__body {
                padding-top: 5px;
                padding-bottom: 5px;
            }        
        }
        .btn-edit {
            position: absolute;
            top: 5px;
            right: 20px;
        }

        // .trading-content {
        //     display: flex;
        //     justify-content: center;
        // }

    }

</style>
 